<template>
  <div class="myCollection mt-80">
    <!-- -->
    <el-container style="position: relative; z-index: 0">
      <!-- 侧边栏容器 -->
      <route-list
        :predictionData="predictionData"
        :collectDatas="collectDatasList"
        :routeName="routeName"
        :isCloseBtn="false"
        :isBackBtn="isBackBtn"
        :isHistory="isHistory"
        @handleChangeRoute="handleChangeRoute"
        @handleDelHistory="handleDelHistory"
        @handleDelAllHistory="handleDelAllHistory"
        @handleClose="handleClose"
        @handleCollect="handleCollect"
      />

      <!-- 地图线路 -->
      <el-main class="collection-main">
        <!-- 线路信息    v-if="list1.length"-->
        <div
          class="real-time-line"
          :style="{
            height: rundirectionFlag == 3 ? '15vw' : '10vw',
          }"
        >
          <!-- 展开 -->
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('langName.langName100')"
            placement="top-start"
          >
            <!-- <i
              class="el-icon-d-arrow-right zhankai-icon cursor-pointer"
              @click="dialogStationVisible = true"
            ></i> -->
            <el-button
              size="mini"
              type="primary"
              plain
              class="zhankai-icon cursor-pointer"
              @click="dialogStationVisible = true"
              >{{ $t("langName.langName100") }}</el-button
            >
          </el-tooltip>
          <!-- 计划时刻 -->
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('langName.langName101')"
            placement="top-start"
          >
            <!-- <i
              class="el-icon-d-arrow-right zhankai-icon1 cursor-pointer"
              @click="openPlanTimeDiag"
            ></i> -->
            <el-button
              size="mini"
              type="primary"
              plain
              class="zhankai-icon1 cursor-pointer"
              @click="openPlanTimeDiag"
              >{{ $t("langName.langName101") }}</el-button
            >
          </el-tooltip>

          <div
            style="width: 92%; height: 90%; padding-top: 20px"
            ref="rightDetail"
          >
            <ul ref="rightTable" style="height: 88%">
              <!-- 上边线 -->
              <li class="route-line"></li>

              <li
                v-if="rundirectionFlag == 3"
                style="
                  border: 3px solid green;
                  width: 50px;
                  height: 67px;
                  position: absolute;
                  top: 80px;
                  right: -40px;
                  border-left: 1px solid transparent;
                  border-top-right-radius: 8px;
                  border-bottom-right-radius: 8px;
                "
              ></li>

              <li v-if="rundirectionFlag != 3">
                <i class="el-icon-right jiantou"></i>
              </li>

              <li v-if="rundirectionFlag == 3">
                <div v-for="(item, index) in list1" :key="index">
                  <!-- 上圆圈 -->
                  <el-tooltip  class="item" placement="bottom" effect="light" v-if="index < list1.length / 2">
                    <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="predictionData.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                      <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                      <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                    <div
                      class="route-cicle"
                      style="top: 78px"
                      :style="{ left: item.left }"
                      @click="getStationBusDetail(item)"
                    ></div>
                  </el-tooltip>
                  <div
                    class="stateTitle"
                    :style="{
                      left: item.left,
                      color:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '#0156ff'
                          : '',
                      fontWeight:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '700'
                          : '400',
                    }"
                    v-if="index < list1.length / 2"
                  >
                    {{ item.stationname }}
                  </div>
                  <!-- 下圆圈 -->
                  <el-tooltip  class="item" placement="bottom" effect="light" v-if="index < list1.length / 2">
                    <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="item.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                      <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                      <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                    <div
                      class="route-cicle"
                      style="top: 148px"
                      :style="{ left: item.left }"
                      @click="getStationBusDetail(item)"
                    ></div>
                  </el-tooltip>
                  <div
                    class="stateTitle1"
                    :style="{
                      left: item.left,
                      color:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '#0156ff'
                          : '',
                      fontWeight:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '700'
                          : '400',
                    }"
                    v-if="index >= list1.length / 2"
                  >
                    {{ item.stationname }}
                  </div>
                </div>
              </li>
              <li v-if="rundirectionFlag != 3">
                <div v-for="(item, index) in list1" :key="index">
                  <!-- 上圆圈 -->
                  <el-tooltip  class="item" placement="bottom" effect="light">
                    <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="item.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                      <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                      <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                      <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                    <div
                      class="route-cicle"
                      style="top: 78px"
                      :style="{ left: item.left }"
                      @click="getStationBusDetail(item)"
                    ></div>
                  </el-tooltip>
                  <div
                    class="stateTitle"
                    :style="{
                      left: item.left,
                      color:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '#0156ff'
                          : '',
                      fontWeight:
                        item.stationname == mapCurrentRouterList[0].stationname
                          ? '700'
                          : '400',
                    }"
                  >
                    {{ item.stationname }}
                  </div>
                </div>
              </li>
              <!-- 小车 -->
              <li>
                <div
                  class="busStyle"
                  :style="{
                    left: item.left,
                    top: item.top,
                    transform: item.top == '125px' ? 'rotateY(180deg)' : '',
                  }"
                  v-for="(item, index) in carJuList"
                  :key="index"
                >
                  <img src="@/assets/images/bus.png" alt="" />
                </div>
              </li>
              <li class="route-line1" v-if="rundirectionFlag == 3"></li>
            </ul>
          </div>
        </div>
        <!-- 地图 -->
        <div class="route-map">
          <div
            id="map"
            :style="{
              height: rundirectionFlag == 3 ? '28vw' : '33vw',
            }"
          ></div>
          <div
            style="
              background: #fff;
              position: fixed;
              right: 21px;
              top: 310px;
              padding: 0 3px;
              z-index: 2;
            "
          >
            <ul>
              <li
                class="cursor-pointer"
                @click="handleControl('restore')"
                style="padding: 0 5px"
              >
                <div
                  style="border-bottom: 1px solid #d3d3d3; padding-top: 10px"
                >
                  <i class="el-icon-refresh-left" size="16"></i>
                </div>
              </li>
              <li
                class="cursor-pointer"
                @click="handleControl('enlarge')"
                style="padding: 0 5px"
              >
                <div
                  style="border-bottom: 1px solid #d3d3d3; padding-top: 10px"
                >
                  <i class="el-icon-plus" size="16"></i>
                </div>
              </li>
              <li
                class="cursor-pointer"
                @click="handleControl('norrow')"
                style="padding: 0 5px"
              >
                <div
                  style="border-bottom: 1px solid #d3d3d3; padding-top: 10px"
                >
                  <i class="el-icon-minus" size="16"></i>
                </div>
              </li>
              <li>
                <div
                  style="
                    background: #fff;
                    position: fixed;
                    right: 0;
                    bottom: 10px;
                    z-index: 2;
                  "
                ></div>
              </li>
            </ul>
          </div>
        </div>
      </el-main>
      <!-- 公告 -->
      <!-- <div class="notice">
      <notification/>
    </div> -->
    </el-container>
    <!-- 详情 -->
    <el-dialog
      :title="$t('langName.langName100')"
      :visible.sync="dialogStationVisible"
      width="90%"
      height="80%"
      style="z-index: 999"
      class="diag"
    >
      <div
        class="real-time-line"
        v-if="list1.length"
        :style="{
          height: rundirectionFlag == 3 ? '15vw' : '20vw',
        }"
      >
        <div style="width: 93%; height: 100%" ref="rightDetail">
          <ul
            ref="rightTable"
            :style="{
              top: rundirectionFlag == 3 ? '80px' : '120px',
            }"
          >
            <!-- 上边线 -->
            <li class="route-line"></li>
            <!-- 环形拐角 -->
            <li
              v-if="rundirectionFlag == 3"
              style="
                border: 3px solid green;
                width: 50px;
                height: 67px;
                position: absolute;
                top: 80px;
                right: -40px;
                border-left: 1px solid transparent;
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
              "
            ></li>

            <li v-if="rundirectionFlag != 3">
              <i class="el-icon-right jiantou"></i>
            </li>

            <li v-if="rundirectionFlag == 3">
              <div v-for="(item, index) in list1" :key="index">
                <!-- 上圆圈 -->
                <el-tooltip  class="item" placement="bottom" effect="light" v-if="index < list1.length / 2">
                  <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                  <div 
                    v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                    slot="content" style="text-align: left;"
                  >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="item.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                    <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                  <div
                    class="route-cicle"
                    style="top: 78px"
                    :style="{ left: item.left }"
                  ></div>
                </el-tooltip>
                <div
                  class="stateTitle"
                  :style="{
                    left: item.left,
                    color:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '#0156ff'
                        : '',
                    fontWeight:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '700'
                        : '400',
                  }"
                  v-if="index < list1.length / 2"
                >
                  {{ item.stationname }}
                </div>
                <!-- 下圆圈 -->
                <el-tooltip  class="item" placement="bottom" effect="light" v-if="index < list1.length / 2">
                    <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="item.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                    <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                  <div
                    class="route-cicle"
                    style="top: 148px"
                    :style="{ left: item.left }"
                  ></div>
                </el-tooltip>
                <div
                  class="stateTitle1"
                  :style="{
                    left: item.left,
                    color:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '#0156ff'
                        : '',
                    fontWeight:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '700'
                        : '400',
                  }"
                  v-if="index >= list1.length / 2"
                >
                  {{ item.stationname }}
                </div>
              </div>
            </li>
            <li v-if="rundirectionFlag != 3">
              <div v-for="(item, index) in list1" :key="index">
                <!-- 上圆圈 -->
                <el-tooltip  class="item" placement="bottom" effect="light">
                    <div v-if="predictionData.generalDesc" slot="content" style="text-align: left;">{{predictionData.generalDesc}}<br></div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.firstBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      {{ $t("langName.langName120") }}：{{predictionData.unreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.firstBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.firstBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.firstBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.firstBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.firstBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.firstBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div v-if="item.secondBusInfo" slot="content" style="text-align: left;">----------------------------------------</div>
                    <div 
                      v-if="(item.stationname == mapCurrentRouterList[0].stationname) && predictionData.secondBusInfo" 
                      slot="content" style="text-align: left;"
                    >
                      <!-- <div v-if="predictionData.generalDesc.includes('Next')">
                        {{predictionData.secondGeneralDesc}}
                      </div><br> -->
                      {{ $t("langName.langName127") }}：{{predictionData.nextBusUnreachedQuantity}}<br>
                      {{ $t("langName.langName121") }}：{{predictionData.secondBusInfo.busSelfId}}<br>
                      {{ $t("langName.langName122") }}：{{predictionData.secondBusInfo.busnumber}}<br>
                      {{ $t("langName.langName123") }}：{{ $t("langName.langName124") }}{{predictionData.secondBusInfo.busnumbermale}}，
                                                        {{ $t("langName.langName125") }}{{predictionData.secondBusInfo.busnumberfemale}}<br>
                      {{ $t("langName.langName126") }}：
                        {{predictionData.secondBusInfo.busType == "0" ? $t("langName.langName137") 
                        : predictionData.secondBusInfo.busType == "1" ? $t("langName.langName138") : $t("langName.langName139")}}<br></div>
                    <div slot="content" style="text-align: left;">{{ item.stationname }}</div>
                    <!-- <div slot="content" style="text-align: left;">{{ item.stationname+'('+$t('langName.langName117')+':'+item.ticketprice+')' }}</div> -->
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName140")+':'+$t("langName.langName143")+':'+item.ticketpricechild+','+$t("langName.langName144")+':'+ item.hhticketpricechild}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName141")+':'+$t("langName.langName143")+':'+item.ticketprice+','+$t("langName.langName144")+':'+ item.hhticketprice}}</div>
                    <div slot="content" style="text-align: left;">{{ $t("langName.langName142")+':'+$t("langName.langName143")+':'+item.ticketpriceold+','+$t("langName.langName144")+':'+ item.hhticketpriceold}}</div>
                  <div
                    class="route-cicle"
                    style="top: 78px"
                    :style="{ left: item.left }"
                  ></div>
                </el-tooltip>
                <div
                  class="stateTitle"
                  :style="{
                    left: item.left,
                    color:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '#0156ff'
                        : '',
                    fontWeight:
                      item.stationname == mapCurrentRouterList[0].stationname
                        ? '700'
                        : '400',
                  }"
                >
                  {{ item.stationname }}
                </div>
              </div>
            </li>
            <!-- 小车 -->
            <li>
              <div
                class="busStyle"
                :style="{
                  left: item.left,
                  top: item.top,
                  transform: item.top == '125px' ? 'rotateY(180deg)' : '',
                }"
                v-for="(item, index) in carJuList"
                :key="index"
              >
                <img src="@/assets/images/bus.png" alt="" />
              </div>
            </li>
            <li class="route-line1" v-if="rundirectionFlag == 3"></li>
          </ul>
        </div>
      </div>
      <div  style="bottom: 20px; left:40%; position: absolute;">
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="exportDetail()"
          >{{ $t("langName.langName118") }}</el-button
        >
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="printDataTbale1()"
          >{{ $t("langName.langName119") }}</el-button
        >
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="dialogStationVisible = false"
          >{{ $t("langName.langName79") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 计划时刻 -->
    <el-dialog
      :title="$t('langName.langName101')"
      :visible.sync="dialogplaningVisible"
      width="50%"
      style="z-index: 999"
      class="diag"
      :class="[setTheme == 1 ? 'blue0' : 'red0']"
    >
      <div v-if="plannedTimeList && isQueryShow" style="display:flex">
        <div style="width:50%">
          <div class="directionName">{{ $t("langName.langName102") }}:{{ plannedTimeList.routeName }}</div>
          <div style="display: flex">
            <div class="titleName mt-31">{{ $t("langName.langName110") }}</div>
            <div class="titleName">
              <!-- {{ plannedTimeList.upStartStationName }}- -->
              To:
              {{
                plannedTimeList.upEndStationName
              }}
            </div>
          </div>
          <template>
            <el-table 
              :data="plannedTimeList.segUpList" 
              border
              max-height="470px"
              style="width: 98%" 
              :cell-style="{padding: '3px'}"
              :row-class-name="tableRowClassName"
              :header-cell-style="{'text-align': 'center',background: '#e4e3e8',color: 'black'}"
            >
              <el-table-column prop="time" :label="$t('langName.langName134')" align="center"></el-table-column>
              <el-table-column prop="statusName" :label="$t('langName.langName135')" align="center"></el-table-column>
            </el-table>
          </template>
        </div>
        <div style="width:50%">
          <div style="display: flex; margin-top: 30px">
            <div class="titleName mt-31">{{ $t("langName.langName111") }}</div>
            <div class="titleName">
              <!-- {{ plannedTimeList.downStartStationName }}- -->
              To:
              {{
                plannedTimeList.downEndStationName
              }}
            </div>
          </div>
          <template>
            <el-table 
              :data="plannedTimeList.segDownList" 
              style="width: 98%" 
              border
              max-height="470px"
              :cell-style="{padding: '3px'}"
              :row-class-name="tableRowClassName"
              :header-cell-style="{'text-align': 'center',background: '#e4e3e8',color: 'black'}"
            >
              <el-table-column prop="time" :label="$t('langName.langName134')" align="center"></el-table-column>
              <el-table-column prop="statusName" :label="$t('langName.langName135')" align="center"></el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- <div v-if="plannedTimeList && isQueryShow">
        <div class="directionName">{{ plannedTimeList.routeName }}</div>
        <div class="titleName">{{ $t("langName.langName110") }}</div>
        <div class="titleName">
          {{ plannedTimeList.upStartStationName }}-{{
            plannedTimeList.upEndStationName
          }}
        </div>
        <table
          border="0"
          cellpadding="4"
          cellspacing="1"
          bgcolor="#cccccc"
          class="tabtop13"
          align="center"
          v-if="
            plannedTimeList &&
            plannedTimeList.segUpList &&
            plannedTimeList.segUpList.length
          "
        >
          <tr
            v-for="(item, index) in Math.ceil(
              plannedTimeList.segUpList.length / 10
            )"
            :key="index"
          > -->
            <!-- 待发车：空白  已发车：浅绿  已完成：偏紫色 已确认：蓝色 烂班：灰黑色 故障：浅橙色  -->
            <!-- 1待发送蓝色   2已发灰色     3完成灰色                             4故障红色    0未知红色-->
            <!-- <td
              v-for="(item, i) in plannedTimeList.segUpList"
              :key="i"
              v-if="i >= index * 15 && i < (index + 1) * 15"
              :style="{
                background:
                  item.status == 0 || item.status == 4
                    ? '#efa900'
                    : item.status == 2
                    ? '#0eb76e'
                    : item.status == 3
                    ? '#697ce1'
                    : item.status == 1
                    ? '#ffffff'
                    : item.status == 5
                    ? '#999999'
                    : '',
              }"
            >
              {{ item.time }} <br> {{ item.statusName }}
            </td>
          </tr>
        </table>
        <div class="titleName mt-30">{{ $t("langName.langName111") }}</div>
        <div class="titleName">
          {{ plannedTimeList.downStartStationName }}-{{
            plannedTimeList.downEndStationName
          }}
        </div>
        <table
          border="0"
          cellpadding="4"
          cellspacing="1"
          bgcolor="#cccccc"
          class="tabtop13"
          align="center"
          v-if="
            plannedTimeList &&
            plannedTimeList.segDownList &&
            plannedTimeList.segDownList.length
          "
        >
          <tr
            v-for="(item, index) in Math.ceil(
              plannedTimeList.segDownList.length / 10
            )"
            :key="index"
          >
            <td
              v-for="(item, i) in plannedTimeList.segDownList"
              :key="i"
              v-if="i >= index * 15 && i < (index + 1) * 15"
              :style="{
                background:
                item.status == 0 || item.status == 4
                    ? '#efa900'
                    : item.status == 2
                    ? '#0eb76e'
                    : item.status == 3
                    ? '#697ce1'
                    : item.status == 1
                    ? '#ffffff'
                    : item.status == 5
                    ? '#999999'
                    : '',
              }"
              class="tdStyChange"
            >
              {{ item.time }} <br> {{ item.statusName }}
            </td>
          </tr>
        </table>
      </div> -->
      <div v-if="!plannedTimeList && isQueryShow">
        <el-empty :description="$t('langName.langName43')"></el-empty>
      </div>
      <div  style="bottom: 20px; left:35%; position: absolute;">
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="exportPlanDetail()"
          >{{ $t("langName.langName118") }}</el-button
        >
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="printDataTbale2()"
          >{{ $t("langName.langName119") }}</el-button
        >
        <el-button
          :type="setTheme == 1 ? 'primary' : 'danger'"
          @click="dialogplaningVisible = false"
          >{{ $t("langName.langName79") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Map, View, Feature } from "ol";
import { Point } from "ol/geom";
import "ol/ol.css";
import printJS from '@/utils/printJS.js';
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import LineString from "ol/geom/LineString";
import { Stroke, Icon, Style, Fill, Text } from "ol/style";
import googleMapLine from "@/utils/maps/googleMap";
import routeList from "@/components/routeList";
import notification from "@/components/notification";

import { defaults as defaultControls } from "ol/control";

import { Notification } from "element-ui";
import {
  getRouteDetail,
  getRecent,
  getPlanTime,
  getTheRealTimeLocation,
  getMessageinfos,
  getRealTimeGps,
  exportDetailExcelData,
  getStationRoute
} from "@/api/collect";
import { getRefreshTime } from "@/utils/location";
export default {
  name: "myCollection",
  components: {
    routeList,
    notification,
  },
  props: ["routeName", "collectDatas", "isBackBtn", "isHistory"],
  data() {
    return {
      busroute: "",
      favoritesTab: "",
      map: null,
      dateRange: [],
      routes: [],
      routesAll: [],
      routeGeometry: null,
      list1: [],
      points: [],
      centerAddress: [],
      selectedStartFeatureLayer: null,
      selectedEndFeatureLayer: null,
      selectedCenterFeatureLayer: null,
      lineLayer: {},
      mapLayer: {},
      mapCurrentRouterList: [{ stationname: "" }],
      pointFeature: [],
      pointFeature4: [],
      carJuList: [],
      timer: null,
      rundirectionFlag: "",
      collectDatasList: [],
      routeDetailItem: null,
      dialogStationVisible: false,
      dialogplaningVisible: false,
      isQueryShow: false,
      plannedTimeList: {},
      predictionData:[],
    };
  },

  watch: {
    collectDatas: {
      handler(newVal) {
        this.collectDatasList = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  async mounted() {
    await this.getRouteDetail(this.$store.state.routeListStore);
    await this.createMap();
    await this.getMessageinfos();
  },
  created() {
    this.mapCurrentRouterList = [{ stationname: "" }];
    this.refreshTime = getRefreshTime(this.$store.state.changeRefresh);
    this.setTheme = localStorage.getItem("setTheme")
      ? localStorage.getItem("setTheme")
      : "1";

    // this.$notify({
    //     title: '',
    //     message: "2323",
    //     position: 'bottom-right',
    //     // duration:0,
    //     dangerouslyUseHTMLString:true
    //   });
  },

  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.status === 0) {
        return 'status-row0';
      } else if (row.status === 1) {
        return 'status-row1';
      } else if (row.status === 2) {
        return 'status-row2';
      } else if (row.status === 3) {
        return 'status-row3';
      } else if (row.status === 4) {
        return 'status-row4';
      } else if (row.status === 5) {
        return 'status-row5';
      }
      return '';
    },
    headerClassName(){
      return 'status-row5';
    },
    // 获取通告信息
    async getMessageinfos() {
      let date = this.$dayjs(new Date().getTime()).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      let params = {
        time: date,
        routeId: this.routeDetailItem.routeid,
        type: '1'
      };
      let { status, data } = await getMessageinfos(params);
      if (status == 200 && data.length) {
        // let message = [];
        // data.forEach((item) => {
        //   message.push(item.content);
        // });
        // message = message.join(",");
        // message = message.replace(/,/g, "<br/>");
        // const h = this.$createElement;
        let dom;
        data.forEach(e => {
          if(dom){
            dom += `<div>${this.$t('langName.langName102')+':'+e.routeid+','+this.$t('langName.langName145')+':'}${e.content}</div>`
          }else{
            dom = `<div>${this.$t('langName.langName102')+':'+e.routeid+','+this.$t('langName.langName145')+':'}${e.content}</div>`
          }    
        })
        this.isNotify = this.$notify({
          title: this.$t("langName.langName104"),
          message: dom,
          position: "bottom-right",
          duration: 0,
          dangerouslyUseHTMLString: true,
        });
      }
    },
    // 获取线路详情  绘制当前站点，终点，以及用户所在位置
    async getRouteDetail(item) {
      clearInterval(this.timer);
      let count;
      this.carJuList = [];
      this.rundirectionFlag = item.rundirection;
      let { status, data } = await getRouteDetail(item.routeid);
      this.routeDetailItem = item;
      if (status == 200) {
        if (!data) return (this.list1 = this.stationList = []);
        if (item.rundirection == 2) {
          this.stationList = data.up; //2上行
        } else {
          this.stationList = data.down; //1下行
        }
        // 环形----两行显示  10  5 4个空隙
        if (item.rundirection == 3) {
          // 共100分，每个空袭占几分
          count = 100 / (this.stationList.length / 2 - 1);
          let number;
          this.list1 = this.stationList.map((item, index) => {
            if (index < this.stationList.length / 2) {
              let num = count * index + "%";
              item.left = num;
              number = index;
            } else {
              let num = count * number + "%";
              item.left = num;
              number--;
            }

            return item;
          });
        } else {
          // 上下行---一行显示
          count = 100 / (this.stationList.length - 1);
          this.list1 = this.stationList.map((item, index) => {
            let num = count * index + "%";
            item.left = num;
            return item;
          });
        }
        this.getTheRealTimeLocation(item);
        this.getRealTimeGps(item);
        this.getRefreshTheRealTimeLocation(item);

        // 站点地图进入详情
        if (this.isBackBtn) {
          if (this.routeName) {
            if (item.stationname == this.routeName) {
              this.list1.forEach((it, i) => {
                if(it.stationname == this.routeName){
                  this.centerAddress = [it.longitude, it.latitude];
                  this.mapCurrentRouterList = [it];
                  this.getStationRoute(it)
                }
              });
            } else {
              this.centerAddress = [
                this.list1[0].longitude,
                this.list1[0].latitude,
              ];
            }
          }
        } else {
          // 从收藏进入或者历史线路
          this.centerAddress = [
            this.list1[0].longitude,
            this.list1[0].latitude,
          ];
          await this.getRecent();
        }

        // 重新绘制地图中心点位置，重绘地图标记点与线路
        if (this.map) {
          this.map.getView().animate({
            center: this.centerAddress,
            duration: 5,
            zoom: window.MAPSETTINGS.DEFAULTZOOM,
          });
          this.drawLine();
          this.drawSpot();
        }
      }
    },
    // 获取车辆实时位置(地图) isArrLeft  1到站 2离站
    async getRealTimeGps(item) {
      this.pointFeature4 = [];
      let params = `${item.routeid}/${item.rundirection}`;
      let { data } = await getRealTimeGps(params);
      if (!data) return;
      let carRealLoaction = data;
      // console.log("carRealLoaction--------",carRealLoaction);
      let array = carRealLoaction.concat();
      let pointFeature;
      array.forEach((v) => {
        pointFeature = new Feature({
          geometry: new Point([v.longitude, v.latitude]),
        });
        pointFeature.setStyle(
          new Style({
            image: new Icon({
              src: require("../assets/images/bus_Big.png"),
              scale: 0.4,
            }),
            text: new Text({
              textAlign: "center", //对齐方式
              textBaseline: "middle", //文本基线
              font: "normal 12px 微软雅黑", //字体样式
              text: v.stationname, //文本内容
              borderRadius: "10px",
              offsetY: 20, // Y轴偏置
              fill: new Fill({
                //填充样式
                color: "#000",
              }),
              backgroundStroke: new Stroke({ color: "#f78989", width: 1 }),
              // backgroundStroke: new Stroke({ color: "#ffcc33", width: 1 }),
              backgroundFill: new Fill({
                // 填充背景
                color: "rgb(255,255,255)",
              }),
              padding: [2, 5, 2, 5],
            }),
          })
        );
        this.pointFeature4.push(pointFeature);
      });
      this.pointSource4 = new VectorSource({
        features: this.pointFeature4,
      });
      this.map.removeLayer(this.selectedFeatureLayer4);
      this.selectedFeatureLayer4 = new VectorLayer({
        source: this.pointSource4,
      });
      this.map.addLayer(this.selectedFeatureLayer4);
    },
    // 获取车辆实时位置 isArrLeft  1到站 2离站
    // ?routeId=6022&stationId=55151202000000000159
    async getTheRealTimeLocation(item) {
      let params = `${item.routeid}/${item.rundirection}`;
      let { data } = await getTheRealTimeLocation(params);
      if (!data) return;
      let carRealLoaction = data;
      this.carJuList = [];
      let obj = {
        left: "",
        top: "",
      };
      carRealLoaction.forEach((item) => {
        this.list1.forEach((i, index) => {
          // 如果两个站点名字相同 && isArrLeft属性==1  则在当前站点，将当前站点的left-0.2给小车
          // 如果两个站点相同  &&isArrLeft属性==2  在当前站点与下一个站点的中间
          if (i.stationname == item.station) {
            if (item.isArrLeft == 2) {
              if (i.rundirection == 3 && index > this.list1.length / 2) {
                obj = {
                  left: i.left,
                  top: "125px",
                };
              } else {
                obj = {
                  left: i.left,
                  top: "90px",
                };
              }
            } else {
              // 在站点上
              if (i.rundirection == 3 && index > this.list1.length / 2) {
                obj = {
                  left: parseFloat(i.left) - 0.6 + "%",
                  top: "125px",
                };
              } else {
                obj = {
                  left: parseFloat(i.left) - 0.1 + "%",
                  top: "90px",
                };
              }
            }

            this.carJuList.push(obj);
          }
        });
      });
    },
    async getRefreshTheRealTimeLocation(item) {
      clearInterval(this.timer);
      this.timer = setInterval(async () => {
        this.getTheRealTimeLocation(item);
        this.getRealTimeGps(item);
        this.getRefreshTheRealTimeLocation(item);
      }, this.refreshTime);
    },

    // 切换线路
    handleChangeRoute(item) {
      this.linesSource.clear();
      this.list1 = [];
      if (this.pointSource) {
        this.pointSource.removeFeature(this.pointFeature);
        this.map.removeLayer(this.selectedFeatureLayer);
      }
      if (this.pointSource1) {
        this.pointSource1.removeFeature(this.pointFeature1);
        this.map.removeLayer(this.selectedFeatureLayer1);
      }
      if (this.pointSource2) {
        this.pointSource2.removeFeature(this.pointFeature2);
        this.map.removeLayer(this.selectedFeatureLayer2);
      }

      if (this.pointSource3) {
        this.pointSource3.removeFeature(this.pointFeature3);
        this.map.removeLayer(this.selectedFeatureLayer3);
      }
      if (this.pointSource4) {
        this.pointSource4.removeFeature(this.pointFeature4);
        this.map.removeLayer(this.selectedFeatureLayer4);
      }
      this.$store.commit("setRouteListStore", item);
      this.$store.commit("setIsMore", this.$store.state.isMore);
      this.getRouteDetail(item);
    },
    handleClose() {
      this.$router.go(-1);
    },

    // 绘制地图(可视区是第一个站点位置)
    createMap() {
      this.map = new Map({
        target: "map",
        layers: [googleMapLine.initMapLayer()],
        view: new View({
          center: this.centerAddress,
          projection: "EPSG:4326",
          zoom: window.MAPSETTINGS.DEFAULTZOOM,
        }),
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false,
        }),
      });

      // 绘制线路
      this.drawLine();
      // 绘制地图站点
      this.drawSpot();
    },
    // 获取离用户最近得站点
    async getRecent() {
      this.mapCurrentRouterList = [{ stationname: "" }];
      let params = localStorage.getItem("userId");
      let { status, data } = await getRecent(params);
      if (status == 200) {
        if (data) {
          this.mapCurrentRouterList = [data];
        }
      }
    },
    // 绘制地图标志点
    drawSpot() {
      this.pointFeature = [];
      let array = this.list1.concat();
      array.shift();
      array.pop();
      // 如果站点名不为空，获取到当前的站点，改变颜色
      if (
        this.mapCurrentRouterList &&
        this.mapCurrentRouterList.length &&
        this.mapCurrentRouterList[0].stationname
      ) {
        array = array.filter((item) => {
          return item.stationname != this.mapCurrentRouterList[0].stationname;
        });
      }
      let pointFeature;
      // 请求接口获取用户最近的站点，改变颜色
      array.forEach((v) => {
        pointFeature = new Feature({
          geometry: new Point([v.longitude, v.latitude]),
        });

        pointFeature.setStyle(
          new Style({
            image: new Icon({
              src: require("../assets/images/busStop.png"),
              scale: 0.4,
            }),
            text: new Text({
              textAlign: "center", //对齐方式
              textBaseline: "middle", //文本基线
              font: "normal 12px 微软雅黑", //字体样式
              text: v.stationname, //文本内容
              borderRadius: "10px",
              offsetY: 20, // Y轴偏置
              fill: new Fill({
                //填充样式
                color: "#000",
              }),
              backgroundStroke: new Stroke({ color: "#f78989", width: 1 }),
              // backgroundStroke: new Stroke({ color: "#ffcc33", width: 1 }),
              backgroundFill: new Fill({
                // 填充背景
                color: "rgb(255,255,255)",
              }),
              padding: [2, 5, 2, 5],
            }),
          })
        );
        this.pointFeature.push(pointFeature);
      });
      this.pointSource = new VectorSource({
        features: this.pointFeature,
      });

      this.selectedFeatureLayer = new VectorLayer({
        source: this.pointSource,
      });

      this.map.addLayer(this.selectedFeatureLayer);
      this.drawSignCicle();
    },
    //地图相关操作(放大/缩小/复原)
    handleControl(name) {
      switch (name) {
        case "enlarge":
          this.map.getView().animate({
            zoom: this.map.getView().getZoom() + 1,
          });
          break;
        case "norrow":
          this.map.getView().animate({
            zoom: this.map.getView().getZoom() - 1,
          });
          break;
        case "restore":
          this.map.getView().animate({
            zoom: window.MAPSETTINGS.DEFAULTZOOM,
          });
          break;
      }
    },

    drawSignCicle() {
      this.pointFeature1 = new Feature({
        type: "icon",
        geometry: new Point([this.list1[0].longitude, this.list1[0].latitude]),
      });
      this.pointSource1 = new VectorSource({
        features: [this.pointFeature1],
      });

      this.selectedFeatureLayer1 = new VectorLayer({
        source: this.pointSource1,
        style: new Style({
          image: new Icon({
            src: require("../assets/images/startpoint.png"),
            scale: 1.4,
          }),
          text: new Text({
            textAlign: "center", //对齐方式
            textBaseline: "middle", //文本基线
            font: "normal 12px 微软雅黑", //字体样式
            text: this.list1[0].stationname, //文本内容
            borderRadius: "10px",
            offsetY: 20, // Y轴偏置
            fill: new Fill({
              color: "#000",
            }),
            // backgroundStroke: new Stroke({ color: "#ffcc33", width: 1 }),
            backgroundStroke: new Stroke({ color: "#f78989", width: 1 }),
            backgroundFill: new Fill({
              // 填充背景
              color: "rgb(255,255,255)",
            }),
            padding: [2, 5, 2, 5],
          }),
        }),
      });
      this.map.addLayer(this.selectedFeatureLayer1);

      this.pointFeature2 = new Feature({
        type: "icon",
        geometry: new Point([
          this.list1[this.list1.length - 1].longitude,
          this.list1[this.list1.length - 1].latitude,
        ]),
      });
      this.pointSource2 = new VectorSource({
        features: [this.pointFeature2],
      });

      this.selectedFeatureLayer2 = new VectorLayer({
        source: this.pointSource2,
        style: new Style({
          image: new Icon({
            src: require("../assets/images/endPoint.png"),
            scale: 1.4,
          }),
          text: new Text({
            textAlign: "center", //对齐方式
            textBaseline: "middle", //文本基线
            font: "normal 12px 微软雅黑", //字体样式
            text: this.list1[this.list1.length - 1].stationname, //文本内容
            borderRadius: "10px",
            offsetY: 20, // Y轴偏置
            fill: new Fill({
              color: "#000",
            }),
            // backgroundStroke: new Stroke({ color: "#ffcc33", width: 1 }),
            backgroundStroke: new Stroke({ color: "#f78989", width: 1 }),
            backgroundFill: new Fill({
              // 填充背景
              color: "rgb(255,255,255)",
            }),
            padding: [2, 5, 2, 5],
          }),
        }),
      });
      this.map.addLayer(this.selectedFeatureLayer2);
    },
    // 绘制地图线路[[ [104.009161, 30.707512],[104.100516, 30.708231] ],];
    drawLine() {
      let lines = [];

      // let lines1 = [];
      this.list1.map((item) => {
        item.jwd.forEach(e => {
          if(e !== "null" && e != undefined){
            lines.push([Number(e.split(",")[0]),Number(e.split(",")[1])])
            // lines.push([e.split(",")[0],e.split(",")[1]])
          }
        });
      });
      // lines = this.list1.map((item) => {
      //   return [item.longitude, item.latitude];
      // });
      // lines.pop()
      lines = [lines];
      console.log('经纬度',lines);
      let lineFeature = new Array();
      let lineFeature2 = null;
      lines.map((v) => {
        lineFeature2 = new Feature({
          geometry: new LineString(v),
        });
        lineFeature.push(lineFeature2);
      });
      this.linesSource = new VectorSource({
        features: lineFeature,
      });
      this.lineLayer = new VectorLayer({
        source: this.linesSource,
        style: new Style({
          stroke: new Stroke({
            color: "#02B578",
            width: 6,
          }),
        }),
      });

      this.map.addLayer(this.lineLayer);
    },
    // 获取计划时刻列表
    async getPlanTime() {
      let parems = {
        userId : localStorage.getItem("userId"),
        routeId : this.routeDetailItem.routeid,
      };
      let { status, data } = await getPlanTime(parems);
      if (status == 200) {
        this.plannedTimeList = data;
        this.isQueryShow = true;
      }
    },
    openPlanTimeDiag() {
      this.dialogplaningVisible = true;
      this.getPlanTime();
    },
    handleDelHistory(item) {
      this.$emit("handleDelHistory", item);
    },
    handleDelAllHistory() {
      this.$emit("handleDelAllHistory");
    },
    handleCollect(item) {
      this.$emit("handleCollect", item);
    },
    //导出站点明细
    exportDetail(){
      let params = {
        'routeId':this.routeDetailItem.routeid,
        'runDirection':this.rundirectionFlag
      }
      this.downloadGet('mcrsegmentstationgs/exportExcelData', params, `站点.xlsx`)     
    },
     //导出计划明细
    exportPlanDetail(){
      let params = {
        'userId':localStorage.getItem("userId"),
        'routeId':this.routeDetailItem.routeid
      }
      this.downloadGet('fdisdisplan/exportExcelData', params, `计划.xlsx`)     
    },
    // 打印表格数据 hf 2024-1-12
    async printDataTbale1() {
      // 全局加载laoding
      const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
      // 在this.optionsBody.columns中获取要打印的标头，并且去除选择框字段和序号字段
      // const list = this.optionsBody.columns.map(item => { return { field: item.field, displayName: item.title, columnSize: 1 } }).filter(item => item.field);
      const list = [
        {field:'routename',columnSize:1,displayName:this.$t('langName.langName129')},
        {field:'routetype',columnSize:1,displayName:this.$t('langName.langName130')},
        {field:'stationname',columnSize:1,displayName:this.$t('langName.langName131')},
        {field:'ticketprice',columnSize:1,displayName:this.$t('langName.langName117')},
        {field:'stationtypename',columnSize:1,displayName:this.$t('langName.langName132')}
      ]
      // 拿到要打印的字段，并不是接口返回的所有字段都要处理
      const fieldList = list.map(item => item.field);
      // 获取数据
      // const { data } = await getSiteInfoList({ quantity: 99999, start: 1 });
      const data = this.list1
      // 处理数组中的每个对象中等于null的值，和字典值的值，
      // console.log('this.list1',this.list1);
      const newArray = data.map(obj => {
        // 处理每个对象的字段
        for (let field in obj) {
          obj.routetype = this.rundirectionFlag == 1 ? 'L' : 'R';
          // 检查字段是否在fieldList中且值为null
          if (fieldList.includes(field) && obj[field] === null) {
            // 如果满足条件，将值更改为空字符串
            obj[field] = '';
          }
          // 找到字典值字段进行处理
          // if (field == 'siteType' && obj[field] !== null) {
          //   obj[field] = this.siteTypeList.find(item => item.itemValue == obj.siteType)?.itemKey || '';
          // }
        }
        return obj;
      });
      loading.close();
      printJS({
        printable: newArray,// 表格数据
        properties: list,// 表头数据
        type: 'json',// 打印类型、默认pdf html json image
        header: this.$t('langName.langName133'),
        // 样式设置
        gridStyle: 'border: 2px solid #ccc;',
        gridHeaderStyle: 'color: #000;  border: 2px solid #ccc;',
        repeatTableHeader: true, // 在打印JSON数据时使用。当设置为false时，数据表头将仅显示在第一页。
      })
    },
    async printDataTbale2() {
      // 全局加载laoding
      const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
      const list = [
        {field:'routename',columnSize:1,displayName:this.$t('langName.langName129')},
        {field:'routetype',columnSize:1,displayName:this.$t('langName.langName130')},
        {field:'time',columnSize:1,displayName:this.$t('langName.langName134')},
        {field:'statusName',columnSize:1,displayName:this.$t('langName.langName135')},
      ]
      // 拿到要打印的字段，并不是接口返回的所有字段都要处理
      const fieldList = list.map(item => item.field);
      // 获取数据
      // const { data } = await getSiteInfoList({ quantity: 99999, start: 1 });
      let segDownList = this.plannedTimeList.segDownList.map(obj => {
        obj.routetype = 'L'
        return obj;
      });
      let segUpList = this.plannedTimeList.segUpList.map(obj => {
        obj.routetype = 'R'
        return obj;
      });

      // 处理数组中的每个对象中等于null的值，和字典值的值，
      let newArray = [...segUpList, ...segDownList].map(obj => {
        // 处理每个对象的字段
        for (let field in obj) {
          // 检查字段是否在fieldList中且值为null
          obj.routename = this.plannedTimeList.routeName
          if (fieldList.includes(field) && obj[field] === null) {
            // 如果满足条件，将值更改为空字符串
            obj[field] = '';
          }
          //找到字典值字段进行处理
          if (field == 'siteType' && obj[field] !== null) {
            obj[field] = this.siteTypeList.find(item => item.itemValue == obj.siteType)?.itemKey || '';
          }
        }
        return obj;
      });
      loading.close();
      printJS({
        printable: newArray,// 表格数据
        properties: list,// 表头数据
        type: 'json',// 打印类型、默认pdf html json image
        header: this.$t('langName.langName101'),
        // 样式设置
        gridStyle: 'border: 2px solid #ccc;',
        gridHeaderStyle: 'color: #000;  border: 2px solid #ccc;',
        repeatTableHeader: true, // 在打印JSON数据时使用。当设置为false时，数据表头将仅显示在第一页。
      })
    },
    getStationBusDetail(data){
      this.mapCurrentRouterList = [{ stationname: data.stationname }]
      this.getStationRoute(data)
    },
    // 获取选中站点的所有线路
    async getStationRoute(stationInfo) {
      let params = {
        stationId: stationInfo.stationid,
        userId: localStorage.getItem("userId")
          ? localStorage.getItem("userId")
          : "", //用户id
      };
      let { status, data } = await getStationRoute(params);
      if (status == 200) {
        let busInfo = data
        busInfo.forEach(item => {
          if (item.routeid == stationInfo.routeId) {
            this.predictionData = item
          }
        })
      }
    },
  },
  destroyed() {
    this.mapCurrentRouterList = [];
    clearInterval(this.timer);
    Notification.closeAll();

    this.linesSource.clear();
    this.list1 = [];
    if (this.pointSource) {
      this.pointSource.removeFeature(this.pointFeature);
      this.map.removeLayer(this.selectedFeatureLayer);
    }
    if (this.pointSource1) {
      this.pointSource1.removeFeature(this.pointFeature1);
      this.map.removeLayer(this.selectedFeatureLayer1);
    }
    if (this.pointSource2) {
      this.pointSource2.removeFeature(this.pointFeature2);
      this.map.removeLayer(this.selectedFeatureLayer2);
    }

    if (this.pointSource3) {
      this.pointSource3.removeFeature(this.pointFeature3);
      this.map.removeLayer(this.selectedFeatureLayer3);
    }
    if (this.pointSource4) {
      this.pointSource4.removeFeature(this.pointFeature4);
      this.map.removeLayer(this.selectedFeatureLayer4);
    }
  },
};
</script>
<style>
.notify-success::-webkit-scrollbar {
  width: 0px;
}
</style>
<style lang="scss" scoped>
// 右边主体o
.collection-main {
  position: absolute;
  left: 460px;
  width: calc(100% - 500px) !important;
  // width: 1440px !important;
  text-align: left;
  background: #fdfdfd;
  margin: 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #f5f5f5;
  // height:200px;
  // height: 380px;

  border-radius: 20px;
  // 线路信息
  .real-time-line {
    position: relative;
    width: 100%;
    // height: 380px;

    background: #ffffff;

    ul {
      position: relative;
      top: 30px;
      height: 240px;
      margin: 0 20px 0 40px;
    }
    .jiantou {
      position: absolute;
      top: 70px;
      right: -35px;
      font-size: 25px;
    }
    .route-line {
      width: 100%;
      position: absolute;
      top: 80px;
      height: 3px;
      background: green;
    }
    .route-line1 {
      width: 100%;
      position: absolute;
      top: 150px;
      height: 3px;
      background: green;
    }
    .route-cicle {
      position: absolute;
      z-index: 1;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      margin-left: -1px;
      border: 1px solid green;
    }
    .routeInfo {
      display: flex;
      align-items: center;
      margin-top: 100px;
      margin-left: 20px;
      .arrow {
        width: 20px;
        margin: 0 20px;
      }
      .nomalStyle {
        font-size: 12px;
        font-style: normal;
        color: #c8cbcc;
      }
    }
    .timeSlot {
      font-size: 12px;
      color: rgb(161, 160, 160);
      margin-left: 30px;
      font-size: 14px;
      .line-info {
        font-weight: 700;
      }
      .line-info::before {
        content: "";
        display: inline-block;
        height: 10px;
        width: 10px;
        margin-left: 10px;
        margin-right: 5px;
        background: url("@/assets/images/goujianxinxi.png") no-repeat center
          center;
      }
    }
    .busStyle {
      position: absolute;
      width: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .changeInfo {
      margin: 0 10px 0 20px;
      width: 30px;
    }
  }
  .stateTitle {
    position: absolute;
    top: 20px;
    // margin-left: -15px;
    // writing-mode: vertical-rl;
    font-size: 14px;
    width: 100px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transform: translateX(-10px) rotate(-45deg);
  }
  .stateTitle1 {
    position: absolute;
    top: 190px;
    // margin-left: -15px;
    // writing-mode: vertical-rl;
    font-size: 14px;
    width: 100px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transform: translateX(-10px) rotate(45deg);
  }
  // 地图
  .route-map {
    bottom: 0;
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
  }
  #map {
    width: 100%;
  }
}

.diag {
  // 线路信息
  .real-time-line {
    position: relative;
    width: 100%;
    background: #ffffff;

    ul {
      position: relative;
      top: 120px;
      height: 240px;
      margin: 0 20px 0 40px;
    }
    .jiantou {
      position: absolute;
      top: 70px;
      right: -35px;
      font-size: 25px;
    }
    .route-line {
      width: 100%;
      position: absolute;
      top: 80px;
      height: 3px;
      background: green;
    }
    .route-line1 {
      width: 100%;
      position: absolute;
      top: 150px;
      height: 3px;
      background: green;
    }
    .route-cicle {
      position: absolute;
      z-index: 1;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      margin-left: -1px;
      border: 1px solid green;
    }
    .routeInfo {
      display: flex;
      align-items: center;
      margin-top: 100px;
      margin-left: 20px;
      .arrow {
        width: 20px;
        margin: 0 20px;
      }
      .nomalStyle {
        font-size: 12px;
        font-style: normal;
        color: #c8cbcc;
      }
    }
    .timeSlot {
      font-size: 12px;
      color: rgb(161, 160, 160);
      margin-left: 30px;
      font-size: 14px;
      .line-info {
        font-weight: 700;
      }
      .line-info::before {
        content: "";
        display: inline-block;
        height: 10px;
        width: 10px;
        margin-left: 10px;
        margin-right: 5px;
        background: url("@/assets/images/goujianxinxi.png") no-repeat center
          center;
      }
    }
    .busStyle {
      position: absolute;
      width: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .changeInfo {
      margin: 0 10px 0 20px;
      width: 30px;
    }
  }
  .stateTitle {
    position: absolute;
    top: -50px;
    font-size: 14px;
    width: 310px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transform: translateX(-35px) rotate(-45deg);
  }
  .stateTitle1 {
    position: absolute;
    top: 270px;
    font-size: 14px;
    width: 310px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transform: translateX(-50px) rotate(45deg);
  }
}
::v-deep .el-dialog {
  height: 670px;
  margin-top: 3vh !important;
}
.zhankai-icon {
  position: absolute;
  top: 10px;
  right: 140px;
}
.zhankai-icon1 {
  position: absolute;
  top: 10px;
  right: 30px;
}
.directionName {
  font-size: 20px;
  text-align: left;
  margin-bottom: 7px;
}
::v-deep .el-step__icon-inner {
  display: none;
}
::v-deep .el-step__icon {
  width: 12px;
  height: 12px;
  background: green;
  border: 1px solid green;
}
::v-deep .el-step.is-horizontal .el-step__line {
  top: 6px;
  background-color: green;
}
::v-deep .el-step__title.is-process {
  color: #333;
  font-weight: 400;
}
::v-deep .el-step__title.is-wait {
  color: #333;
  font-weight: 400;
}
.tabtop13 {
  margin-top: 13px;
}
.tabtop13 td {
  background-color: #ffffff;
  height: 4vh;
  padding: 0 10px;
  word-break: keep-all;
}
.titleName {
  font-size: 16px;
  text-align: left;
}
.mt-30 {
  margin-top: 30px;
}
.mt-31 {
  margin-right: 30px;
}
.notice {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}
::v-deep .el-empty {
  padding: 10vw 0;
}
::v-deep .el-notification__content p {
  height: 200px !important;
  overflow: auto;
  background: red;
}
</style>
<style>
  .el-table .status-row0 {
    background: #ffecec;
  }
  .el-table .status-row1 {
    background: #ffffff;
  }
  .el-table .status-row2 {
    background: #cde6c7;
  }
  .el-table .status-row3 {
    background: #afb4db;
  }
  .el-table .status-row4 {
    background: #ffecec;
  }
  .el-table .status-row5 {
    background: #999999;
  }
  .blue0 .el-dialog__header {
    padding: 20px 20px 10px;
    background-color: #409EFF;
  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #FFFFFF;
  }
  .red0 .el-dialog__header {
    padding: 20px 20px 10px;
    background-color: #fd1717;
  }
</style>
